﻿@using System.Web.Script.Serialization
@{
    ViewBag.Title = "Create";
}


<div>
    <label>Attribute:</label>
    <select data-bind="options: AvailableSpecificationAttributes, optionsText: 'Name', value: SelectedSpecificationAttribute"></select>
</div>
<div>
    <label>Attribute Option</label>
    
    <!-- ko with: SelectedSpecificationAttribute -->
    <select data-bind="options: Options, optionsText: 'Name', value: $root.SelectedSpecificationAttributeOption"></select>
     <!-- /ko -->
</div>
<div>
    <label>display order</label>
    <input type="text"/>
</div>
<div>
    <input type="button" value="Create" data-bind="click:SaveProductVarianAttribute"/>
</div>


@{
    
    var model = ViewBag.Model;
    var jsonStr = new HtmlString(new JavaScriptSerializer().Serialize(model));
}

@section scripts
{
    <script>
        var init = @jsonStr;

        function SpecificationAttribute(id, name, options) {
            var self = this;
            self.Name = ko.observable(name);
            self.Id = ko.observable(id);
            self.Options = ko.observableArray(options);
        }

        function SpecificationAttributeOption(id, name) {
            var self = this;
            self.Name = ko.observable(name);
            self.Id = ko.observable(id);
        }

        function ProductSpeficationAttributeModel() {
            var self = this;

            var cts = $.map(init.AvailableSpecificationAttributes, function(a) {
                var ops = $.map(a.AvailableSpecificationAttributeOptions, function(c) {
                    return new SpecificationAttributeOption(c.Id, c.Name);
                });
                return new SpecificationAttribute(a.Id, a.Name, ops);
            });
            self.AvailableSpecificationAttributes = ko.observableArray(cts);
            self.SelectedSpecificationAttribute = ko.observable();
            self.SelectedSpecificationAttributeOption = ko.observable();
            self.ProductId = ko.observable(init.ProductId);
            
            self.SelectedSpecificationAttribute.subscribe(function() {
                self.SelectedSpecificationAttributeOption(undefined);
            });

            self.SaveProductVarianAttribute = function() {
                $.ajax({
                    url: "/api/ProductSpeficationAttributeApi/InsertProductSpeficiationAttribute",
                    type: 'post',
                    data: ko.toJSON(self),
                    contentType: 'application/json',
                    success: function (result) {

                        if (result.Status == "0") {
                            alert("保存成功");
                        }
                        else {
                            alert("保存失败：" + result.Msg);
                        }
                    }
                });
            };

        }

        var vm = new ProductSpeficationAttributeModel();
        ko.applyBindings(vm);

    </script>
}